<template>
  <div class="root">
    <el-tabs :value="formInline.status" @input="handleTabChange">
      <el-tab-pane label="所有订单" name="all"></el-tab-pane>
      <el-tab-pane label="待付款订单" name="0"></el-tab-pane>
      <el-tab-pane label="待发货订单" name="1"></el-tab-pane>
      <el-tab-pane label="已发货订单" name="2"></el-tab-pane>
      <el-tab-pane label="已完成订单" name="3"></el-tab-pane>
      <el-tab-pane label="已关闭订单" name="4"></el-tab-pane>
      <el-tab-pane label="无效订单" name="5"></el-tab-pane>
    </el-tabs>
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        label-position="left"
        label-width="120"
      >
        <el-form-item label="平台订单编号">
          <el-input
            v-model="formInline.orderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品货号">
          <el-input
            v-model="formInline.productCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input
            v-model="formInline.receiverName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input
            v-model="formInline.receiverPhone"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="快递单号">
          <el-input
            v-model="formInline.trackingNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="formInline.orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="店铺 ">
          <el-select v-model="formInline.storeOrder" :clearable="true">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺订单编号">
          <el-input
            v-model="formInline.storeOrderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件省份">
          <el-select v-model="formInline.addresseeProvince" :clearable="true">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item, index) in options"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <div class="btnBoxs">
          <el-button icon="el-icon-refresh-right" @click="chongzhi"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="getOrderList"
            >查询</el-button
          >
          <el-button
            icon="el-icon-download"
            type="primary"
            @click="handleExport"
            >导出订单</el-button
          >
        </div>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <el-table :data="list" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="platformOrderSn"
          label="订单编号"
          min-width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="payPrice"
          label="支付金额"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope"> {{ scope.row.payPrice }}元 </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.status == 0
                ? "待付款"
                : scope.row.status == 1
                ? "待发货"
                : scope.row.status == 2
                ? "已发货"
                : scope.row.status == 3
                ? "已完成"
                : scope.row.status == 4
                ? "已关闭"
                : scope.row.status == 5
                ? "无效订单"
                : scope.row.status == 6
                ? "售后订单"
                : scope.row.status == 7
                ? "退款完成"
                : "未知状态"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverProvince"
          label="收件省份"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="receiverCity"
          label="收件城市"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="receiverRegion"
          label="收件区县"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="receiverDetailAddress"
          label="详细地址"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="receiverName"
          label="收件人姓名"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="receiverPhone"
          label="收件人手机号"
          min-width="120"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="trackingNumber"
          label="快递单号"
          width="100"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="expressPrice"
          label="快递费用"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="servePrice"
          label="服务费用"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          min-width="120"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div style="display: flex">
              <el-button
                type="primary"
                size="small"
                @click="showOrderDetail(scope.row.omsOrderItemList)"
                >查看商品</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="tableBox">
        <div class="tableHeder">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple">商品</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">单价</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">数量</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">商品操作</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">实付金额</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">交易状态</div></el-col
            >
            <el-col :span="5"
              ><div class="grid-content bg-purple">操作</div></el-col
            >
          </el-row>
        </div>
        <div class="tableCell">
          <div class="cellList" v-for="(item, index) in list" :key="index">
            <div class="cellHeader">
              <div class="cellLeft">
                平台订单编号:
                <div class="dataBox">{{ item.platformOrderSn }}</div>
                <div class="dataBox newDataBox">
                  创建时间：{{ item.createTime }}
                </div>
              </div>
              <div class="dataBox">
                {{ item.receiverName }} - {{ item.receiverPhone }} -{{
                  item.receiverProvince
                }}
                - {{ item.receiverCity }} - {{ item.receiverRegion }} -
                {{ item.receiverDetailAddress }}
              </div>
            </div>
            <div class="tableContent">
              <el-row :gutter="20" type="flex" align="middle">
                <el-col :span="10">
                  <div
                    v-for="item1 in item.omsOrderItemList.slice(0, 1)"
                    :key="item1.id"
                    style="margin-bottom: 0.1rem"
                  >
                    <el-row :gutter="20" type="flex" align="middle">
                      <el-col :span="14"
                        ><div class="grid-content bg-purple">
                          <div class="shopsData">
                            <img
                              :src="item1.productPic"
                              class="newImg"
                              alt=""
                            />
                            <div class="shopsDataBox">
                              <div class="nameBox">{{ item1.productName }}</div>
                              <div class="Model">
                                商品货号：{{ item1.productCode }}
                              </div>
                              <div class="Model">
                                颜色：{{ item1.skuData.color }} 尺码：{{
                                  item1.skuData.size
                                }}
                              </div>
                            </div>
                          </div>
                        </div></el-col
                      >
                      <el-col :span="5"
                        ><div class="grid-content bg-purple">
                          <div class="price">￥{{ item1.productPrice }}</div>
                        </div></el-col
                      >
                      <el-col :span="5"
                        ><div class="grid-content bg-purple">
                          <div class="price">{{ item1.productQuantity }}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>

                <el-col :span="3"
                  ><div class="grid-content bg-purple">-</div></el-col
                >
                <el-col :span="3"
                  ><div class="grid-content bg-purple">
                    <div class="ActualPayment">
                      <p>{{ item.payPrice }}元</p>
                      <p class="price">商品费用{{ item.productPrice }}元</p>
                      <p class="price">快递费{{ item.expressPrice }}元</p>
                      <p class="price">服务费{{ item.servePrice }}元</p>
                    </div>
                  </div></el-col
                >
                <el-col :span="3"
                  ><div class="grid-content bg-purple">
                    {{
                      item.status == 0
                        ? "待付款"
                        : item.status == 1
                        ? "待发货"
                        : item.status == 2
                        ? "已发货"
                        : item.status == 3
                        ? "已完成"
                        : item.status == 4
                        ? "已关闭"
                        : "已关闭"
                    }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div class="grid-content bg-purple">
                    <div class="Controls">
                      <div class="conteolsLeft">
                        <el-button
                          type="text"
                          v-if="
                            formInline.status == ' ' ||
                            formInline.status == '2' ||
                            formInline.status == '4'
                          "
                          >关闭订单</el-button
                        >
                        <el-button
                          type="text"
                          v-if="
                            formInline.status == '2' || formInline.status == '3'
                          "
                          >查看物流</el-button
                        >
                        <el-button type="text" v-if="formInline.status == '2'"
                          >确认收货</el-button
                        >
                        <el-button
                          type="text"
                          v-if="item.omsOrderItemList.length > 1"
                          @click="showOrderDetail(item.omsOrderItemList)"
                          >查看更多商品</el-button
                        >
                      </div>
                      <img
                        @click="dialogVisible = true"
                        src="@/static/Imgs/userImg/qizi.png"
                        class="qiziImg"
                        alt=""
                      />
                    </div></div
                ></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div> -->
      <div class="pagingBox">
        <PaginationView :total="total" @change="fenye"></PaginationView>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">订单备忘</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px">
        <div class="Markers">
          标记
          <el-radio v-model="radio" label="1">
            <img src="@/static/Imgs/userImg/hongqi.png" alt="" class="newQizi"
          /></el-radio>
          <el-radio v-model="radio" label="2">
            <img src="@/static/Imgs/userImg/huangqi.png" alt="" class="newQizi"
          /></el-radio>
          <el-radio v-model="radio" label="3">
            <img src="@/static/Imgs/userImg/lvqi.png" alt="" class="newQizi"
          /></el-radio>
          <el-radio v-model="radio" label="4">
            <img src="@/static/Imgs/userImg/lanqi.png" alt="" class="newQizi"
          /></el-radio>
          <el-radio v-model="radio" label="5">
            <img src="@/static/Imgs/userImg/ziqi.png" alt="" class="newQizi"
          /></el-radio>
        </div>
        <el-input
          style="margin-top: 20px"
          type="textarea"
          :autosize="{ minRows: 6 }"
          placeholder="请输入内容"
          v-model="textarea2"
        >
        </el-input>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button type="primary" class="hongBtn"> 确定</el-button>
      </div>
    </el-dialog>
    <order-detail
      ref="orderDetailRef"
      @send-goods="getOrderList"
    ></order-detail>
  </div>
</template>

<script>
import {
  fetchOrderList,
  selectStoreNAmByParams,
  postExportOrder,
} from "@/api/OrderManagement";
import { selectAllAddress } from "@/api/shopDetail";
import orderDetail from "./component/orderDetailDialog.vue";
import dayjs from "dayjs";
export default {
  data() {
    return {
      total: 0,
      textarea2: "",
      radio: "1",
      dialogVisible: false,
      activeName: "a",
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        status: "all",
        orderTime: [],
        receiverPhone: "",
        productCode: "",
        receiverName: "",
        orderNumber: "",
        storeName: "",
        trackingNumber: "",
        addresseeProvince: "",
        storeOrderNumber: "",
      },
      form: {},
      checkAll: false,
      isIndeterminate: false,
      checkedCities: [],
      list: [],
      options: [],
      storeList: [],
      checkedOrderIds: [],
    };
  },
  components: {
    orderDetail,
  },
  created() {
    this.selectAllAddress();
    this.selectStoreNAmByParams();
    this.getOrderList();
  },
  activated() {
    this.getOrderList();
    // this.selectAllAddress();
  },
  methods: {
    dayjs,
    handleSelectionChange(e) {
      this.checkedOrderIds = e.map((i) => i.id);
    },
    handleTabChange(index) {
      if (index != this.formInline.status) {
        this.formInline.status = index;
        this.getOrderList();
      }
    },
    // 分页
    fenye(val) {
      this.formInline.pageNumber = val.currentPage;
      this.getOrderList();
    },
    // 获取所有店铺
    selectStoreNAmByParams() {
      selectStoreNAmByParams().then((data) => {
        this.storeList = data.data;
      });
    },
    // 获取省市区地址
    selectAllAddress() {
      selectAllAddress().then((data) => {
        this.options = data.data;
      });
    },
    // 订单详情
    showOrderDetail(i) {
      this.$refs.orderDetailRef.dialogVisible = true;
      this.$refs.orderDetailRef.tableData = i;
    },
    // 重置
    chongzhi() {
      this.formInline = {
        pageNumber: 1,
        pageSize: 10,
        status: "all",
        orderNumber: "",
        productCode: "",
        receiverName: "",
        receiverPhone: "",
        trackingNumber: "",
        orderTime: "",
        addresseeProvince: "",
        storeOrderNumber: "",
        storeOrder: "",
      };
      this.getOrderList();
    },
    // 获取订单列表
    getOrderList() {
      const params = {
        ...this.formInline,
      };
      if (this.formInline.status === "all") delete params.status;
      fetchOrderList(params).then((data) => {
        this.list = data.data.list || [];
        this.total = data.data.total;
      });
    },
    handleExport() {
      const params = {
        ...this.formInline,
        status: this.formInline.status == "all" ? null : this.formInline.status,
        ids: !this.checkedOrderIds.length ? null : this.checkedOrderIds,
      };
      delete params.pageNumber;
      delete params.pageSize;
      postExportOrder(params).then((data) => {
        const blob = new Blob([data]);
        const downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = "订单.xlsx"; // 文件名可以根据需要修改
        // 将下载链接元素添加到DOM中并模拟点击下载链接
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 清理下载链接元素和二进制流对象
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(downloadLink.href);
      });
    },
    handleCheckAllChange() {},
    handleCheckedCitiesChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
.root {
  font-size: 12px;
  .btnBoxs {
    display: flex;
    // justify-content: flex-end;
    cursor: pointer;
  }
  .tableBox {
    .tableHeder {
      margin-top: 20px;
      background: #ebeff5;
      padding: 12px;
      font-size: 14px;
    }
    .tableCell {
      margin-top: 20px;
      .cellHeader {
        background: #f5f7f9;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        .cellLeft {
          display: flex;
          align-items: center;
        }
        .dataBox {
          font-size: 14px;
          color: #666666;
          margin-left: 10px;
        }
        .newDataBox {
          margin-left: 50px;
        }
      }
      .tableContent {
        padding: 15px;
        font-size: 14px !important;
        .shopsData {
          display: flex;
          .newImg {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
          .shopsDataBox {
            margin-left: 10px;
            .nameBox {
              font-size: 14px;
            }
            .Model {
              color: #999999;
              margin-top: 12px;
              font-size: 12px;
            }
          }
        }
        .price {
          color: #666666;
        }
        .ActualPayment {
        }
        .Controls {
          display: flex;
          justify-content: space-between;
          /deep/ .el-button {
            display: block;
            margin-left: 0;
          }
          .qiziImg {
            width: 24px;
            height: 24px;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    .btnBoxs {
      display: flex;
      // justify-content: flex-end;
      cursor: pointer;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
